<template>
	<view class="pb-safe-area">
		<view class="p-4 flex flex-column grid-gap-4" v-if="info.trade">
			<view class="flex flex-column grid-gap-10 p-4 bg-white rounded-4">
				<view class="flex flex-center flex-column grid-gap-2 pt-6">
					<image :src="info.technician_headimg" mode="scaleToFill" class="rounded-round"
						style="width: 100rpx;height: 100rpx;" />
					<text class="h19 font-weight-600">{{ info.technician_nickname }}</text>
				</view>
				<view class="flex flex-center">
					<x-money type="dark-light-1" unit-type="dark-light-1" weight="bold" size="4" :money="info.price" :abbreviation="false">
						<template #prefix>
							<text class="h10 text-dark-light-1">￥</text>
						</template>
					</x-money>
				</view>
				<view class="flex flex-column grid-gap-4 p-6">
					<view class="flex">
						<text class="w-100px h10 text-placeholder">当前状态</text>
						<text class="flex-1 h10">{{ info.state_text.text }}</text>
					</view>
					<view class="flex">
						<text class="w-100px h10 text-placeholder">支付时间</text>
						<text class="flex-1 h10">{{ info.pay_time }}</text>
					</view>
					<view class="flex">
						<text class="w-100px h10 text-placeholder">预约时间</text>
						<text class="flex-1 h10">{{ info.start_time }}</text>
					</view>
					<view class="flex">
						<text class="w-100px h10 text-placeholder">预约客户</text>
						<text class="flex-1 h10">{{ info.name }}</text>
					</view>
					<view class="flex">
						<text class="w-100px h10 text-placeholder">预约地址</text>
						<text class="flex-1 h10">{{ info.address_detail }}</text>
					</view>
					<view class="flex">
						<text class="w-100px h10 text-placeholder">支付方式</text>
						<view class="flex flex-1 flex-y-center grid-gap-2" v-if="info.pay_type === 'money'">
							<image src="@/static/icons/pay/balance.png" style="width:20px;height:20px;"></image>
							<text class="h10">余额支付</text>
						</view>
						<view class="flex flex-1 flex-y-center grid-gap-2" v-else-if="info.pay_type === 'wxpay'">
							<image src="@/static/icons/pay/wxpay.png" style="width:20px;height:20px;"></image>
							<text class="h10">微信支付</text>
						</view>
						<view class="flex flex-1 flex-y-center grid-gap-2" v-else-if="info.pay_type === 'alipay'">
							<image src="@/static/icons/pay/alipay.png" style="width:20px;height:20px;"></image>
							<text class="h10">支付宝</text>
						</view>
						<view class="flex flex-1 flex-y-center grid-gap-2" v-else-if="info.pay_type === 'epay'">
							<image src="@/static/icons/pay/epay.png" style="width:20px;height:20px;"></image>
							<text class="h10">易支付</text>
						</view>
					</view>
					<view class="flex">
						<text class="w-100px h10 text-placeholder">订单号</text>
						<text class="flex-1 h10">{{ info.trade }}</text>
					</view>
				</view>
			</view>

			<view class="flex grid-gap-4">
				<view class="flex-1 flex bg-white rounded-4 p-4 flex-center grid-gap-2"
					@tap="$page.switch('/pages/index/index')">
					<uni-icons type="left" color="var(--xl-placeholder)"></uni-icons>
					<text class="flex-1 h9 text-grey text-center">返回首页</text>
				</view>
				<view class="flex-1 flex bg-primary rounded-4 p-4 flex-center grid-gap-2"
					@tap="$page.switch('/pages/order/list')">
					<text class="flex-1 h9 text-white text-center">我的订单</text>
					<uni-icons type="right" color="var(--xl-white)"></uni-icons>
				</view>
			</view>
		</view>
		<x-loading v-if="loading"/>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { $api, $page } from '@/utils';
const info = ref({});
const loading = ref(false);
const getOrderInfo = (trade: any) => {
	loading.value = true;
	$api.Orders.info(trade).then((data: any) => {
		info.value = data;
	}).catch((err: any) => {
		uni.showModal({
			title: '提示',
			content: err.msg,
			showCancel: false,
			success: () => {
				$page.back();
			}
		})
	}).finally(() => {
		loading.value = false;
	})
}
onLoad((options: any) => {
	getOrderInfo(options.trade)
})
</script>
<style lang="scss" scoped>
.w-100px {
	width: 100px;
}
</style>
